<template>
  <div class="app-container">
    <el-row>
      <el-col :span="14" :offset="5">
        <el-card
          v-for="(article, index) in list"
          :key="index"
          :body-style="{ padding: '10px' }"
          shadow="hover"
          class="card"
        >
          <div style="display: flex; flex-direction: row; justify-content: left; align-items: center">
            <img :src="article.header.url">
            <div style="display: inline-block">
              <h4 style="margin: 0px 0px 5px 0px;">{{ article.name }}</h4>
              <div class="bottom clearfix">
                <time class="time">{{ article.updateTime }}</time>
                <p>{{ article.brief }}</p>
                <el-button class="button" type="text" @click="gotoDetail(article.detailUrl, article.id)" >查看</el-button>
                <el-button class="button" type="text" @click="deleteDetail(article.id)" >删除</el-button>
              </div>
            </div>
          </div>
        </el-card>
        <el-dialog :visible.sync="detailDialogVisible" :key="detailDialogId" title="文章正文">
          <iframe :src="toUrl"/>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getAllArticles, deleteById } from '@/api/articles'

export default {
  name: 'Messages',
  data() {
    return {
      list: [],
      detailDialogVisible: false,
      detailDialogId: {
        type: Number,
        default: 0
      },
      toUrl: '',
      listQuery: {
        page: 1,
        limit: 10
      }
    }
  },

  created() {
    this.getList()
  },

  methods: {
    getList() {
      this.listLoading = true
      getAllArticles(this.listQuery).then(response => {
        this.list = response.data.data.list
        this.total = response.data.data.total
        this.listLoading = false
        console.log(this.list)
      }).catch(() => {
        this.list = []
        this.total = 0
        this.listLoading = false
      })
    },
    gotoDetail(gotourl, id) {
      // this.$router.push({
      //   name: 'r-detail',
      //   params: {
      //     url: gotourl
      //   }
      // })
      this.detailDialogVisible = true
      this.detailDialogId = id
      this.toUrl = gotourl
    },
    deleteDetail(id) {
      this.$confirm('确认删除吗？')
        .then(_ => {
          deleteById({
            id: id
          }).then(response => {
            this.getList()
            this.$notify.success({
              title: '成功',
              message: '删除成功'
            })
          })
        })
    }
  }
}
</script>

<style scoped>
  img{
    width: 180px;
    height: 135px;
    object-fit: cover;
    margin: 15px;
  }

  .time{
    color: #b8b8b8;
    font-size: 12px
  }
  .card{
    margin-bottom: 14px;
  }

  .button {
    padding: 0;
    float: left;
  }

  iframe{
    width: 100%;
    height: 600px;
  }
</style>
